<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的订单中心</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link th:href="@{/showstatic/css/orderstyle.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/managerstatic/plugins/layui/css/layui.css}" rel="stylesheet" media="all" />

    <script th:src="@{/showstatic/js/jquery.1.9.1.js}"></script>
    <script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/showstatic/js/tab.js}"></script>
    <script type="text/javascript" th:src="@{/showstatic/js/vue.min.js}"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>


<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-return" onclick="location.href=url+'movieshow/index.html'"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">我的订单</span>
        </div>
    </header>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab>
              <ul class="tab-nav">
                <li class="tab-nav-item" id="first" style="width: 17%">
                    <a href="javascript:void(0);" onclick="payorder()"><img th:src="@{/showstatic/svg/pay.svg}" style="width: 25px;height: 35px;">已付款(<span id="titlepayOrder"></span>)</a>
                </li>
                <li class="tab-nav-item" style="width: 17%">
                    <a href="javascript:void(0);" onclick="noPayOrder()"><img th:src="@{/showstatic/svg/waitpay.svg}" style="width: 25px;height: 30px;">待付款(<span id="titlenopayorder"></span>)</a>
                </li>
                    <li class="tab-nav-item" style="width: 16%">
                    <a href="javascript:void(0);" onclick="changeOrder()"><img th:src="@{/showstatic/svg/change.svg}" style="width: 20px;height: 20px;">已改签(<span id="titlechangeorder"></span>)</a>
                </li>
                <li class="tab-nav-item" style="width: 16%">
                    <a href="javascript:;" onclick="finishOrder()"><img th:src="@{/showstatic/svg/waitcomment.svg}" style="width: 20px;height: 20px;">待评价(<span id="titlefinishorder"></span>)</a>
                </li>
                <li class="tab-nav-item" style="width: 16%">
                      <a href="javascript:;" onclick="turnOrder()"><img th:src="@{/showstatic/svg/turnorder.svg}" style="width: 20px;height: 20px;">已退票(<span id="titleturnorder"></span>)</a>
                </li>
                <li class="tab-nav-item" style="width: 16%">
                    <a href="javascript:;" onclick="timeoutOrder()"><img th:src="@{/showstatic/svg/timeout.svg}" style="width: 20px;height: 20px;">已失效(<span id="titletimeoutorder"></span>)</a>
                </li>
              </ul>
            <div class="divHeight"></div>
            <div class="tab-panel">
                <!--已付款订单-->
                <div class="tab-panel-item" id="payOrder">
                    <div class="tab-item" v-for="(orderdto,index) in orderList">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                            <div class="aui-well-item-hd">
                                <img v-bind:src="orderdto.logo" style="height: 20px;width: 22px" alt="">
                            </div>
                            <div class="aui-well-item-bd">
                                <h3>万达影院</h3>
                            </div>
                            <span>已付款</span>
                        </a>
                        <div class="aui-mail-product">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd" style="height: 95px">
                                    <img v-bind:src="orderdto.img" alt="" style="height: 100px">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>影片名：<span>{{orderdto.movename}}</span></p>
                                    <p>场次：<span>{{orderdto.begintime}}</span>&nbsp;&nbsp;时长：<span>{{orderdto.duration}}&nbsp;分钟</span></p>
                                    <p>影厅：<span>{{orderdto.hallname}}</span>&nbsp;&nbsp;
                                        <span v-for="(seat,dex) in orderdto.seatList">
                                            <span>{{seat.seatrow}}排{{seat.seatcolumn}}列&nbsp;&nbsp;</span>
                                        </span>
                                    </p>
                                    <p>数量：<span>{{orderdto.ticketnum}}</span></p>
                                    <p>总价：￥<span>{{orderdto.adjustedprice}}</span></p>
                                </div>
                            </a>
                        </div>
                        <div class="aui-mail-button">
                            <a  href="javascript:void(0)" v-on:click="returnOrder(index)">退票</a>
                            <a href="javascript:;" class="aui-df-color" v-on:click="changemyorder(index)">改签</a>
                            <a href="javascript:;" class="aui-df-color" v-on:click="sacnticket(index)">扫码取票</a>
                        </div>
                    </div>
                    <div class="divHeight"></div>
                </div>
                <!--待付款订单-->
                <div class="tab-panel-item" id="nopayorder">
                    <div class="tab-item" v-for="(orderdto,index) in orderList">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                            <div class="aui-well-item-hd">
                                <img v-bind:src="orderdto.logo" style="height: 20px;width: 22px" alt="">
                            </div>
                            <div class="aui-well-item-bd">
                                <h3>万达影院</h3>
                            </div>
                            <span class="aui-well-wait"><img th:src="@{/showstatic/svg/clock.svg}" style="width: 20px;height: 20px;">&nbsp;<span id="timemsg"></span></span>
                        </a>
                        <div class="aui-mail-product">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd"  style="height: 95px">
                                    <img v-bind:src="orderdto.img" alt="" style="height: 100px">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>影片名：<span>{{orderdto.movename}}</span></p>
                                    <p>场次：<span>{{orderdto.begintime}}</span>&nbsp;&nbsp;时长：<span>{{orderdto.duration}}&nbsp;分钟</span></p>
                                    <p>影厅：<span>{{orderdto.hallname}}</span>&nbsp;&nbsp;
                                        <span v-for="(seat,dex) in orderdto.seatList">
                                            <span>{{seat.seatrow}}排{{seat.seatcolumn}}列&nbsp;&nbsp;</span>
                                        </span>
                                    </p>
                                    <p>数量：<span>{{orderdto.ticketnum}}</span></p>
                                    <p>总价：￥<span>{{orderdto.adjustedprice}}</span></p>
                                </div>
                            </a>
                        </div>
                        <div class="aui-mail-button">
                            <a href="javascript:void(0);"  v-on:click="payMyOrder(index)">去支付</a>
                        </div>
                    </div>
                </div>
                <!-- 已改签订单-->
                <div class="tab-panel-item" id="changeorder">
                    <div class="tab-item" v-for="(orderdto,index) in orderList">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                            <div class="aui-well-item-hd">
                                <img v-bind:src="orderdto.logo" style="height: 20px;width: 22px" alt="">
                            </div>
                            <div class="aui-well-item-bd">
                                <h3>万达影院</h3>
                            </div>
                            <span>已改签</span>
                        </a>
                        <div class="aui-mail-product">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd" style="height: 95px">
                                    <img v-bind:src="orderdto.img" alt="" style="height: 100px">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>影片名：<span>{{orderdto.movename}}</span></p>
                                    <p>场次：<span>{{orderdto.begintime}}</span>&nbsp;&nbsp;时长：<span>{{orderdto.duration}}&nbsp;分钟</span></p>
                                    <p>影厅：<span>{{orderdto.hallname}}</span>&nbsp;&nbsp;
                                        <span v-for="(seat,dex) in orderdto.seatList">
                                            <span>{{seat.seatrow}}排{{seat.seatcolumn}}列&nbsp;&nbsp;</span>
                                        </span>
                                    </p>
                                    <p>数量：<span>{{orderdto.ticketnum}}</span></p>
                                    <p>总价：￥<span>{{orderdto.adjustedprice}}</span></p>
                                </div>
                            </a>
                        </div>
                        <div class="aui-mail-button">
                            <a href="javascript:;" class="aui-df-color" v-on:click="sacnticket(index)">扫码取票</a>
                        </div>
                    </div>
                </div>
                <!--待评价订单-->
                <div class="tab-panel-item" id="finishorder">
                    <div class="tab-item" v-for="(orderdto,index) in orderList">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                            <div class="aui-well-item-hd">
                                <img v-bind:src="orderdto.logo" style="height: 20px;width: 22px" alt="">
                            </div>
                            <div class="aui-well-item-bd">
                                <h3>万达影院</h3>
                            </div>
                            <span>待评价</span>
                        </a>
                        <div class="aui-mail-product">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd" style="height: 95px">
                                    <img v-bind:src="orderdto.img" alt="" style="height: 100px">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>影片名：<span>{{orderdto.movename}}</span></p>
                                    <p>场次：<span>{{orderdto.begintime}}</span>&nbsp;&nbsp;时长:<span>{{orderdto.duration}}&nbsp;分钟</span></p>
                                    <p>影厅：<span>{{orderdto.hallname}}</span>&nbsp;&nbsp;
                                        <span v-for="(seat,dex) in orderdto.seatList">
                                            <span>{{seat.seatrow}}排{{seat.seatcolumn}}列&nbsp;&nbsp;</span>
                                        </span>
                                    </p>
                                    <p>数量：<span>{{orderdto.ticketnum}}</span></p>
                                    <p>总价：￥<span>{{orderdto.adjustedprice}}</span></p>
                                </div>
                            </a>
                        </div>
                        <div class="aui-mail-button">
                            <a href="javascript:void(0)" v-on:click="beginComment(index)">去评价</a>
                        </div>
                    </div>
                </div>
                <!--已退票订单-->
                <div class="tab-panel-item" id="turnorder">
                    <div class="tab-item" v-for="(orderdto,index) in orderList">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                            <div class="aui-well-item-hd">
                                <img v-bind:src="orderdto.logo" style="height: 20px;width: 22px" alt="">
                            </div>
                            <div class="aui-well-item-bd">
                                <h3>万达影院</h3>
                            </div>
                            <span>已退票</span>
                        </a>
                        <div class="aui-mail-product">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd" style="height: 95px">
                                    <img v-bind:src="orderdto.img" alt="" style="height: 100px">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>影片名：<span>{{orderdto.movename}}</span></p>
                                    <p>场次：<span>{{orderdto.begintime}}</span></p>
                                    <p>影厅：<span>{{orderdto.hallname}}</span>&nbsp;&nbsp;
                                    <p>数量：<span>{{orderdto.ticketnum}}</span></p>
                                    <p>总价：￥<span>{{orderdto.adjustedprice}}</span></p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--已失效订单-->
                <div class="tab-panel-item" id="timeoutorder">
                    <div class="tab-item" v-for="(orderdto,index) in orderList">
                        <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                            <div class="aui-well-item-hd">
                                <img v-bind:src="orderdto.logo" style="height: 20px;width: 22px" alt="">
                            </div>
                            <div class="aui-well-item-bd">
                                <h3>万达影院</h3>
                            </div>
                            <span>已失效</span>
                        </a>
                        <div class="aui-mail-product">
                            <a href="javascript:;" class="aui-mail-product-item">
                                <div class="aui-mail-product-item-hd">
                                    <img v-bind:src="orderdto.img" alt="" style="height: 100px">
                                </div>
                                <div class="aui-mail-product-item-bd">
                                    <p>影片名：<span>{{orderdto.movename}}</span></p>
                                    <p>场次：<span>{{orderdto.begintime}}</span></p>
                                    <p>数量：<span>{{orderdto.ticketnum}}</span></p>
                                    <p>总价：￥<span>{{orderdto.adjustedprice}}</span></p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--  结束-->
            </div>
        </div>
    </section>
</section>

<!--layui弹出层-->
<script th:inline="none">
    function openModak(){
        layui.use(['layer'],function () {
            layer = layui.layer,$=layui.$;
            layer.open({
                type:1,//类型
                title:'二维码取票',            //题目
                shadeClose:false,             //点击遮罩层关闭
                content: $('#img'),           //打开的内容
                area: ['450px', '400px'],
                shade: 0.5,
                success: function(layero){
                   $("#code").prop("src",imgadr);
                },
            });
        })
    }
</script>

<script>
    //二维码地址
    var imgadr;
</script>
<!--二维码div-->
<div id="img" style="display: none;width: 400px;height: 300px">
    <div style="margin: 0 auto;width: 250px">
        <img id="code" src="" style="height: 350px;width: 300px;">
    </div>
</div>
<!--websocket通知消息-->
<!--<div id="message"></div>-->

<!--项目路径-->
<script th:inline="javascript">
    var url = [[@{/}]];
</script>

<!--代付款时间更新-->
<script>
    var maxtime;
    //查询订单的过期时间
    $(function orderTimeOut(){
        $.ajax({
            url:url+"order/findAllOrderByUid",
            type:"post",
            data:{
                "orderType":0
            },
            success:function(data){
                if(data.result.length>0){
                    maxtime = (data.result)[0].timeOut*60;
                    timer = setInterval("CountDown()", 1000);
                }
            }
        })
    });
    //动态代付款时间更新
    function CountDown() {
        if (maxtime >0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "剩余" + minutes + "分" + seconds + "秒";
            $("#timemsg").empty();
            $("#timemsg").html(msg);
            --maxtime;
            if(maxtime==0){
                window.location.reload();
            }
        }
        else{
            clearInterval(timer);
        }
    }

</script>

<!-- vue查询函数  -->
<script>
    commenvue("payOrder",1);      //已付款订单
    commenvue("nopayorder",0);    //未付款订单
    commenvue("changeorder",2);   //已改签订单
    commenvue("finishorder",4);   //待评价订单
    commenvue("turnorder",3);      //已失效订单
    commenvue("timeoutorder",5);  //已失效订单

    //首先显示已支付订单
    payorder();

    //显示所有已支付订单
    function payorder(){
        $("#first").prop("class","tab-nav-item tab-active");
        changeactive("payOrder");
    }

    //显示所有待支付订单
    function noPayOrder() {
       changeactive("nopayorder");

    }
    //显示改签订单
    function changeOrder(){
        changeactive("changeorder");
    }
    //显示待评价订单
    function finishOrder(){
        changeactive("finishorder");
    }
    //显示已退票订单
    function turnOrder(){
        changeactive("turnorder");
    }

    //显示已失效订单
    function timeoutOrder(){
        changeactive("timeoutorder");
    }

    //切换div的激活状态
    function changeactive(divid){
        var div = $(".tab-panel-item tab-active");
        $.each(div,function(){
            this.prop("class","tab-panel-item");
        });
        $("#"+divid).prop("class","tab-panel-item tab-active");
    }
    //vue公用部分代码
    function commenvue(divid,param){
        var vm =new Vue({
            el:"#"+divid,
            data:{
                orderList:[],
                result:{}
            },
            mounted:function () {
                this.cartView();   //类似于jquery中的ready方法
            },
            methods:{
                //获取对应导航数据
                cartView:function () {
                    var _this=this;
                    this.$http.get(url+"order/findAllOrderByUid",{params:{orderType:param},},{emulateJSON: true}).then(function (res) {
                    _this.orderList=res.body.result;    //body是vue封装的一层
                    $("#title"+divid).html( _this.orderList.length);           //导航条显示数量
                        console.log(_this.orderList)
                    });
                },
                //点击开始评论
                beginComment:function(e){
                   var _this=this;
                   //获取电影id
                   var id = _this.orderList[e].movieId;
                   //获取订单号
                   var orderNumber = _this.orderList[e].ordernum;
                   var form = $("<form method='post'></form>");
                   form.attr("action",url+"comment/movieinfo");
                   var input1 = $("<input type='hidden'>").attr("name", "movieid").val(id);
                   var input2 = $("<input type='hidden'>").attr("name", "ordernum").val(orderNumber);
                   form.append(input1);
                   form.append(input2);
                   $("body").append($(form)); form.submit();
               },
               //退票
                returnOrder:function(e){
                    var _this=this;
                    //获取订单号
                    var orderNumber = _this.orderList[e].ordernum;
                    //发送请求该订单是否能退票
                    this.$http.get(url+"order/checkReturnCondition",{params:{orderNum:orderNumber},},{emulateJSON: true}).then(function (res) {
                        _this.result = res.body;    //body是vue封装的一层
                        var resultcode = _this.result.code;
                        if(resultcode==500){
                           alert("开场30分钟之前才能退票");
                        }else{
                            var form = $("<form method='post'></form>");
                            form.attr("action",url+"zilanxuan/query");
                            var input1 = $("<input type='hidden'>").attr("name", "out_trade_no").val(orderNumber); //退款订单号
                            var input2 = $("<input type='hidden'>").attr("name", "trade_no").val("");
                            form.append(input1);
                            form.append(input2);
                            $("body").append($(form)); form.submit();
                        }
                    });
                },
                //改签模块
                changemyorder:function(e){
                    var _this=this;
                    //获取订单号
                    var oldOrderNum = _this.orderList[e].ordernum;
                    // alert("改签订单："+oldOrderNum);
                    //发送请求该订单是否能改签
                    this.$http.get(url+"order/checkChangeCondition",{params:{oldOrderNum:oldOrderNum},},{emulateJSON: true}).then(function (res) {
                        _this.result = res.body;    //body是vue封装的一层
                        var resultcode = _this.result.code;
                        if(resultcode==500){
                            alert("开场30分钟之前才能改签");
                        }else{
                          window.location.href=url+"movieshow/index.html"  //跳转到首页重新选电影
                        }
                    });
                 },
                //支付待付款订单
                payMyOrder:function(e){
                    var _this=this;
                    //获取订单号
                    var orderNumber = _this.orderList[e].ordernum;
                    this.$http.get(url+"order/getWaitPayInfoFromCache",{params:{orderNum:orderNumber},},{emulateJSON: true}).then(function (res) {
                        _this.result = res.body;    //body是vue封装的一层
                        var adjustedprice = _this.result.result.adjustedprice;   //订单总价
                        //提交请求
                        var form = $("<form method='post'></form>");
                        form.attr("action",url+"zilanxuan/pay");
                        var input1 = $("<input type='hidden'>").attr("name", "tradeNo").val(orderNumber);   //新订单号
                        var input2 = $("<input type='hidden'>").attr("name", "subject").val("娱乐消费");
                        var input3 = $("<input type='hidden'>").attr("name", "totalAmount").val(adjustedprice);  //订单金额
                        form.append(input1);
                        form.append(input2);
                        form.append(input3);
                        $("body").append($(form));
                        form.submit();
                    })
                },
                //扫码取票
                sacnticket:function (e) {
                    var _this=this;
                    //获取订单号
                    var disorderNumber = _this.orderList[e].ordernum;
                    this.$http.get(url+"order/getCode",{params:{ordernum:disorderNumber},},{emulateJSON: true}).then(function (res) {
                        _this.result = res.body;    //body是vue封装的一层
                        if(_this.result.code==500){
                           alert(_this.result.msg);
                        }else{
                            imgadr = _this.result.result;
                            openModak();  //打开模态框
                        }
                    });
                }
            }
        });
 }
</script>

<!--websocket部分-->
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/orderwebsocket");
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        // document.getElementById('message').innerHTML += innerHTML + '<br/>';
        if(innerHTML=="ok"){
            window.location.reload();
        }
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</body>
</html>
